Learn how to create classy 3-d buttons with rounded corners, and add them to your Web site. Ideal for action buttons on Web pages.

1. Design Classy Buttons for Your Web Pages
Create a button
like this
www.FirstStepCommunity.info

2. In A Nutshell …
There’s a FREE
1. Create the button graphics Web site to do this
2. Download them to your
computer
3. Upload them to your Web server
4. Add the button to any page on
your Web site
5. Make the button change when This step is
optional
the user’s mouse goes over it
6. Link the button to a Web page
www.FirstStepCommunity.info

3. 1. Create the button graphics
GlassyButtons.com
Experiment with
the various options
on this page
Every option has a
Help button
www.FirstStepCommunity.info

4. 2. Download the final files
When finished, click
this to save the files
Save the ZIP file
on your computer
www.FirstStepCommunity.info

5. What do you need from the ZIP file?
You always get three formats:
GIF, JPG and PNG. You only need
one of them.
If you’re putting this on a textured
background, JPG won’t work. Apart
from that, just choose the smallest
file size.
You also get a button_0 and a
button_1 for each type.
If you want the button to change
when the mouse moves over it,
keep both. If not, keep only button_1
Extract the files you want and give
them more meaningful names
(e.g. order-now0.gif,order-now1.gif)
www.FirstStepCommunity.info

6. 3. Upload to your Web server You might need
your Webmaster’s
help with this step
If you’ve got a First Step
Web site, first choose
“List Documents”
And then choose
UPLOAD A FILE
www.FirstStepCommunity.info

7. 4. Add to a Web page You might need
your Webmaster’s
help with this step
If you’ve got a First Step
Web site, insert an
<img> tag into the page
Here’s a bigger version
of this code for clarity
<img src=quot;docs/order-now1.gifquot; border=0>
www.FirstStepCommunity.info

8. 5. Make it change with “mouse over” Remember: This
step is optional
Same as previous page,
but use this code instead:
<img src=quot;docs/order-now0.gifquot; border=0
onMouseover=quot;this.src='docs/order-now1.gif'quot;
onMouseout=quot;this.src='docs/order-now0.gif'quot;>
VERY IMPORTANT
You MUST combine these
three lines into one long line,
separated by spaces
www.FirstStepCommunity.info

9. 6. Link this to a Web page
Insert a link tag around
the image, like this:
<a href=quot;blah.htmlquot;><img …></a>
This comes first. This bit is is
Replace “blah.html” with from the d th
Ad o
the real Web previous bi t t d
en
page address page the
www.FirstStepCommunity.info

10. That’s it!
www.FirstStepCommunity.info

11. Did you find this tutorial useful?
• Community of like-minded experts
• Discussion forum
• Monthly teleseminars
• On-line tutorials
• Resource library
Join th
e
• Monthly audio programs First S
tep
• E-book of the month Memb
e
Co m m r
unity
• Special member prices
www.FirstStepCommunity.info
www.FirstStepCommunity.info